<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="./js/jquery-1.10.2.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/bootstrapValidator.min.js"></script>
  <link rel="stylesheet" href="./css/forgetPassword.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
    <!-- 注册页面头部 -->
    <div class="signup-header">
      <div class="signup-container">
        <div class="signup-logo">
          <img src="images/LOGO.png">
        </div>
      </div>
    </div>
    <!-- 注册页面 -->
    <div class="signup-center">
      <div class="signup-container">
          <div id="forget" class="signup-l clearfloat">
            <h2>找回密码</h2>
            <p class="shouji">手机验证 &nbsp;&nbsp; | &nbsp;&nbsp; <span style="margin: 0">邮箱验证</span></p>
            <div class="form-group">
              <label>手机号</label>
              <input type="text" class="form-control" name="phone" autocomplete="off" placeholder="请输入您的手机号"/>
            </div>
            <div class="form-group">
              <label>新密码</label>
              <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
            </div>
            <div class="form-group">
              <label>确认密码</label>
              <input type="password" class="form-control" name="confirmPassword" placeholder="请再次确认密码"/>
            </div>
            <div class="cord">
                <span>验证码</span>
                <input type="text" placeholder="请输入验证码">
                <a href="#">获取验证码</a>
            </div>            
            <div class="sign-footer">
              <p class="fPass">忘记密码？<a href="#">重新注册</a></p>
              <button>确定</button>
            </div>
          </div>
      </div>
    </div>
    <!-- 注册页面底部 -->
    <div class="signup-footers">
        <p>&copy;&nbsp;&nbsp;&nbsp;2018  WWW.SHOPPING.COM</p>
    </div>  
</body>
<script>
  $('#forget').bootstrapValidator({
    message: '用户名不能为空',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      password: {
        validators: {
          notEmpty: {
              message: '密码不能为空'
          },
          identical: {
              field: 'confirmPassword',
              message: '密码和它的确认不一样'
          },
          // different: {
          //     field: 'username',
          //     message: '密码不能与用户名相同'
          // }
        }
      },
      confirmPassword: {
        validators: {
            notEmpty: {
                message: '确认密码是必需的，不能是空的。'
            },
            identical: {
                field: 'password',
                message: '密码和它的确认不一样'
            },
            // different: {
            //     field: 'username',
            //     message: '密码不能与用户名相同'
            // }
        }
      },
      phone: {
        validators: {
            notEmpty: {
                message: '手机号码不能为空'
            },
            stringLength: {
                min: 11,
                max: 11,
                message: '请输入11位手机号码'
            },
            regexp: {
                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                message: '请输入正确的手机号码'
            }
        }
      },
    }
  });
</script>
</html>